<template>
  <div class="page-container">
    <div class="in-container">
      <el-row :gutter="8">
        <el-col :span="10">
          <AppTitleBox class="app-title-customer-box" title="客户字典管理">
            <!-- <template #button>
              <el-button @click="addDict()" link type="primary">添加</el-button>
            </template> -->
            <AppSearchForm @submit="search()" @reset="reset()">
              <el-form-item>
                <el-input
                  v-model="query.name"
                  clearable
                  placeholder="输入字典名称或者描述搜索"
                  style="width: 200px"
                />
              </el-form-item>
            </AppSearchForm>
            <AppPageTable
              stripe
              :data="dictTableData.data"
              :singleHighLight="true"
              :autostyle="'height: calc(100% - 32px);'"
              :option="dictTableData.option"
              @change="getList()"
              @singleClick="(data) => singleClickGetDetail(data)"
            >
              <el-table-column
                :show-overflow-tooltip="true"
                prop="name"
                label="名称"
              />
              <el-table-column
                :show-overflow-tooltip="true"
                prop="description"
                label="描述"
              />
              <!-- <el-table-column label="操作" width="90px" fixed="right">
                <template #default="scope">
                  <el-button @click.stop="updateDict(scope.row)" link type="primary"
                    >编辑</el-button
                  >
                  <el-popconfirm
                    title="确定删除本条数据吗？"
                    @confirm="deleteDict(scope.row)"
                  >
                    <template #reference>
                      <el-button link type="danger">删除</el-button>
                    </template>
                  </el-popconfirm>
                </template>
              </el-table-column> -->
            </AppPageTable>
          </AppTitleBox>
        </el-col>
        <el-col :span="14">
          <AppTitleBox class="app-title-box" title="字典详情">
            <template #button>
              <el-button
                @click="addDictDetail()"
                link
                v-show="dictDetailTableData.dictName"
                type="primary"
                >添加</el-button
              >
            </template>
            <div v-show="dictDetailTableData.dictName" style="height: 100%">
              <AppPageTable
                stripe
                :data="dictDetailTableData.data"
                @change="getDetail()"
                :autostyle="'height: 100%;'"
                :option="dictDetailTableData.option"
              >
                <el-table-column prop="belong" label="所属字典" />
                <el-table-column prop="label" label="字典标签" />
                <el-table-column prop="value" label="字典值" />
                <el-table-column prop="dictSort" label="排序" />
                <el-table-column label="操作" width="90px" fixed="right">
                  <template #default="scope">
                    <el-button @click="updateDictDetail(scope.row)" link type="primary"
                      >编辑</el-button
                    >
                    <el-popconfirm
                      title="确定删除本条数据吗？"
                      @confirm="deleteDictDetail(scope.row)"
                    >
                      <template #reference>
                        <el-button link type="danger">删除</el-button>
                      </template>
                    </el-popconfirm>
                  </template>
                </el-table-column>
              </AppPageTable>
            </div>
            <div v-show="!dictDetailTableData.dictName">点击字典查看详情</div>
          </AppTitleBox>
        </el-col>
      </el-row>
    </div>
  </div>
  <el-dialog
    width="500px"
    v-model="dictdialogData.show"
    :title="dictdialogData.title"
  >
    <el-form
      :model="dictData"
      :rules="dictRules"
      label-width="80px"
      ref="dictForm"
    >
      <el-form-item prop="name" label="名称">
        <el-input v-model="dictData.name"></el-input>
      </el-form-item>
      <el-form-item prop="sort" label="描述">
        <el-input v-model="dictData.description" type="textarea"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelDict" link>取消</el-button>
        <el-button type="primary" @click="submitDict"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog
    width="500px"
    v-model="dictDetailDialogData.show"
    :title="dictDetailDialogData.title"
  >
    <el-form
      :model="dictDetailData"
      :rules="dictDetailRules"
      label-width="80px"
      ref="dictDetailForm"
    >
      <el-form-item prop="label" label="字典标签">
        <el-input v-model="dictDetailData.label"></el-input>
      </el-form-item>
      <el-form-item prop="value" label="字典值">
        <el-input v-model="dictDetailData.value"></el-input>
      </el-form-item>
      <el-form-item prop="dictSort" label="排序">
        <el-input-number
          v-model="dictDetailData.dictSort"
          :min="1"
          :max="999"
          controls-position="right"
        ></el-input-number>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelDictDetail" link>取消</el-button>
        <el-button type="primary" @click="submitDictDetail"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent } from "vue";
import AppSearchForm from "@/components/AppSearchForm.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import AppTitleBox from "@/components/AppTitleBox.vue";
export default defineComponent({
  components: {
    AppSearchForm,
    AppPageTable,
    AppTitleBox,
  },
  data() {
    return {
      query: {
        name: "",
      },
      dictTableData: {
        data: [],
        option: useTableOption(),
      },
      dictdialogData: {
        show: false,
        title: "",
      },
      dictData: {
        name: "",
        description: "",
      },
      dictRules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
      },
      //详情表格数据
      dictDetailTableData: {
        id: "",
        dictName: "",
        data: [],
        option: useTableOption(),
      },
      //详情表单数据
      dictDetailData: {
        label: "",
        value: "",
        dictSort: 999,
      },
      //详情表单规则
      dictDetailRules: {
        label: [{ required: true, message: "请输入字典标签", trigger: "blur" }],
        value: [{ required: true, message: "请输入字典值", trigger: "blur" }],
        dictSort: [
          { required: true, message: "请输入排序值", trigger: "blur" },
        ],
      },
      //详情弹窗数据
      dictDetailDialogData: {
        show: false,
        title: "新增字典详情",
      },
    };
  },
  methods: {
    search() {
      this.dictTableData.option.page = 1;
      this.getList();
    },
    reset() {
      this.query = {
        name: "",
        date: [],
        enabled: "",
      };
      this.dictTableData.option.page = 1;
      this.getList();
    },
    addDict() {
      this.dictData = {
        name: "",
        description: "",
      };
      this.dictdialogData.title = "添加字典";
      this.dictdialogData.show = true;
    },
    getList() {
      this.dictTableData.option.loading = true;
      this.$http
        .get("/api/dict/query", {
          PageIndex: this.dictTableData.option.page,
          PageSize: this.dictTableData.option.pageSize,
          keyWords: this.query.name,
        })
        .then((res) => {
          this.dictTableData.data = res.content;
          this.dictTableData.option.total = res.totalElements;
        })
        .catch((err) => {
          this.$message.error("表格数据请求失败");
        })
        .finally(() => {
          this.dictTableData.option.loading = false;
        });
    },
    updateDict(data) {
      this.dictdialogData.title = "编辑字典";
      this.dictData = JSON.parse(JSON.stringify(data));
      this.dictdialogData.show = true;
    },
    deleteDict(data) {
      if (
        this.dictDetailTableData.id &&
        this.dictDetailTableData.id == data.id
      ) {
        this.dictDetailTableData = {
          id: "",
          dictName: "",
          data: [],
          option: useTableOption(),
        };
      }
      this.$http
        .post("/api/dict/delete", { idArray: [data.id] })
        .then((res) => {
          if (res.status) {
            this.$message.success(res.message);
            this.getList();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    cancelDict() {
      this.dictdialogData.show = false;
    },
    submitDict() {
      let url = "";
      if (this.dictData.id) {
        url = "/api/dict/edit";
      } else {
        url = "/api/dict/create";
      }

      this.$http.post(url, this.dictData).then((res) => {
        if (res.status) {
          this.$message.success(res.message);
          this.getList();
          this.cancelDict();
        } else {
          this.$message.error(res.message);
        }
      });
      this.dictdialogData.show = false;
    },
    singleClickGetDetail(data) {
      this.dictDetailTableData.id = data.id;
      this.dictDetailTableData.dictName = data.name;
      this.getDetail();
    },
    getDetail() {
      this.dictDetailTableData.option.loading = true;
      this.$http
        .get("/api/dictDetail/customerquery", {
          PageIndex: this.dictDetailTableData.option.page,
          PageSize: this.dictDetailTableData.option.pageSize,
          DictName: this.dictDetailTableData.dictName,
        })
        .then((res) => {
          res.content = res.content.map((item) => {
            item.belong = this.dictDetailTableData.dictName;
            return item;
          });
          this.dictDetailTableData.data = res.content;
          this.dictDetailTableData.option.total = res.totalElements;
        })
        .finally(() => {
          this.dictDetailTableData.option.loading = false;
        });
    },
    addDictDetail() {
      this.dictDetailDialogData.title = "新增字典详情";
      this.dictDetailDialogData.show = true;
    },
    updateDictDetail(data) {
      this.dictDetailData = JSON.parse(JSON.stringify(data));
      this.dictDetailDialogData.title = "编辑字典详情";
      this.dictDetailDialogData.show = true;
    },
    deleteDictDetail(data) {
      this.$http.post("/api/dictDetail/delete", { id: data.id }).then((res) => {
        if (res.status) {
          this.$message.success(res.message);
          this.getDetail();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    cancelDictDetail() {
      this.dictDetailDialogData.show = false;
    },
    submitDictDetail() {
      let url = "";
      if (this.dictDetailData.id) {
        url = "/api/dictDetail/edit";
      } else {
        url = "/api/dictDetail/create";
        this.dictDetailData.dict = {
          id: this.dictDetailTableData.id,
        };
      }
      this.$http.post(url, this.dictDetailData).then((res) => {
        if (res.status) {
          this.$message.success(res.message);
          this.getDetail();
          this.cancelDictDetail();
        } else {
          this.$message.error(res.message);
        }
      });
      this.dictDetailDialogData.show = false;
    },
  },
  watch: {
    "dictdialogData.show"(newVal) {
      if (!newVal) {
        this.$nextTick(() => {
          this.dictData = {
            name: "",
            description: "",
          };
          this.$refs.dictForm.resetFields();
        });
      }
    },
    "dictDetailDialogData.show"(newVal) {
      if (!newVal) {
        this.$nextTick(() => {
          this.dictDetailData = {
            label: "",
            value: "",
            dictSort: 999,
          };
          this.$refs.dictDetailForm.resetFields();
        });
      }
    },
  },
  created() {
    this.getList();
  },
});
</script>

<style lang="scss" scoped>
.el-row {
  height: 100%;
}

.el-col {
  height: 100%;
}
.app-title-box {
  height: 100%;
  box-sizing: border-box;
}
</style>
